<template>
  <div class="msx">
    <div class="msx-1">
      <div class="mas-11">标题</div>
      <div class="mas-12">上传时间</div>
      <div class="mas-13">操作</div>
    </div>
    <div class="msx-x" v-for="(item, index) in list" :key="index">
      <div class="mas-1a">{{ item.text }}</div>
      <div class="mas-1b">{{ item.time }}</div>
      <div class="mas-1c" @click="add">查看</div>
    </div>
    <div class="pagination-container">
      <div class="ptex">共55条</div>
      <el-pagination
        small
        background
        layout="prev, pager, next"
        :total="50"
        class="mt-4"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { defineEmits } from 'vue'
const emit = defineEmits<{
  (e: 'add', id: string): void
}>()
const add = () => {
  emit('add', '查看')
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}
//模拟数据
const list = [
  {
    text: '开辟和发展中国特色社会主义的必由之路',
    time: '2021-07-01'
  },
  {
    text: '以奋斗姿态激扬青春',
    time: '2021-07-01'
  },
  {
    text: '以奋斗姿态激扬青春',
    time: '2021-07-01'
  },
  {
    text: '以奋斗姿态激扬青春',
    time: '2021-07-01'
  },
  {
    text: '以奋斗姿态激扬青春',
    time: '2021-07-01'
  }
]
</script>

<style lang="scss" scoped>
.msx {
  width: 100%;
  height: 219px;
  .msx-x {
    margin: 0 auto;
    width: 543px;
    height: 40px;
    display: flex;
    box-sizing: border-box;
    padding: 0 20px;
    margin-bottom: 5px;
    background: rgba(111, 58, 6, 0.5);
    .mas-1a {
      flex: 2;
      font-size: 16px;
      font-family:
        PingFangSC-Medium,
        PingFang SC;
      font-weight: 500;
      color: #ffffff;
      line-height: 40px;
      overflow: hidden; /* 确保超出的文本被隐藏 */
      white-space: nowrap; /* 确保文本在一行内显示，不进行换行 */
      text-overflow: ellipsis; /* 当文本超出容器宽度时，使用省略号...表示省略 */
    }
    .mas-1b {
      flex: 1;
      font-size: 16px;
      font-family:
        PingFangSC-Medium,
        PingFang SC;
      font-weight: 500;
      color: #ffffff;
      line-height: 40px;
      text-align: center;
    }
    .mas-1c {
      flex: 1;
      font-size: 16px;
      font-family:
        PingFangSC-Medium,
        PingFang SC;
      font-weight: 500;
      color: #ffcc66;
      line-height: 40px;
      text-align: right;
      cursor: pointer;
    }
  }
  .msx-1 {
    margin: 0 auto;
    width: 543px;
    height: 40px;
    display: flex;
    box-sizing: border-box;
    padding: 0 20px;
    margin-bottom: 12px;
    background: rgba(168, 91, 16, 0.5);
    .mas-11 {
      flex: 2;
      font-size: 16px;
      font-family:
        PingFangSC-Medium,
        PingFang SC;
      font-weight: 500;
      color: #ffffff;
      line-height: 40px;
    }
    .mas-12 {
      flex: 1;
      font-size: 16px;
      font-family:
        PingFangSC-Medium,
        PingFang SC;
      font-weight: 500;
      color: #ffffff;
      line-height: 40px;
      text-align: center;
    }
    .mas-13 {
      flex: 1;
      font-size: 16px;
      font-family:
        PingFangSC-Medium,
        PingFang SC;
      font-weight: 500;
      color: #ffffff;
      line-height: 40px;
      text-align: right;
    }
  }
  .pagination-container {
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;
    padding: 0 10px;
    .ptex {
      margin-right: 10px;
      font-size: 16px;
      font-family:
        PingFangSC-Regular,
        PingFang SC;
      font-weight: 400;
      color: #ffffff;
      line-height: 22px;
    }
    ::v-deep .btn-prev {
      background-color: rgba(141, 82, 77, 0.5);
      color: #fff;
    }
    ::v-deep .number {
      background-color: rgba(141, 82, 77, 0.5);
      color: #fff;
    }
    ::v-deep .btn-next {
      background-color: rgba(141, 82, 77, 0.5);
      color: #fff;
    }
  }
  ::v-deep .is-active {
    background: linear-gradient(180deg, #ffd480 0%, #b1642d 100%);
    border-radius: 4px;
  }
}
</style>
